<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新增邮箱配置</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>

<body>
    <form class="layui-form" action="">
        <div class="mainBox">
            <div class="main-container">
                <!-- 配置名称（必填，非空且去空格） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">配置名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" lay-verify="required|verifyName" autocomplete="off"
                            placeholder="请输入配置名称（如：企业QQ邮箱）" class="layui-input">
                    </div>
                </div>

                <!-- SMTP服务器（必填，非空） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">SMTP</label>
                    <div class="layui-input-block">
                        <input type="text" name="email_host" id="email_host" lay-verify="required|verifyHost"
                            autocomplete="off" placeholder="请输入SMTP地址（如：smtp.qq.com）" class="layui-input">
                    </div>
                </div>

                <!-- SMTP端口（必填，1-65535范围） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">SMTP端口</label>
                    <div class="layui-input-block">
                        <input type="text" name="email_port" id="email_port" lay-verify="required|verifyPort"
                            autocomplete="off" placeholder="常用：465(SSL)、587(非SSL)" class="layui-input">
                    </div>
                </div>

                <!-- 邮箱账号（必填，邮箱格式校验） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="email_user" id="email_user" lay-verify="required|verifyEmail"
                            autocomplete="off" placeholder="请输入发送邮件的邮箱（如：xxx@qq.com）" class="layui-input">
                    </div>
                </div>

                <!-- 授权码/密码（必填，长度校验） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">授权码/密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="email_password" id="email_password"
                            lay-verify="required|verifyPwdLength" autocomplete="off" placeholder="请输入邮箱SMTP授权码（非登录密码）"
                            class="layui-input">
                        <div class="layui-form-mid layui-word-aux">
                            提示：QQ/163/网易/阿里/腾讯/新浪 等邮箱需先开启SMTP服务，再获取授权码
                        </div>
                    </div>
                </div>

                <!-- 是否使用SSL（单选，默认启用） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">使用SSL</label>
                    <div class="layui-input-block">
                        <input type="radio" name="use_ssl" value="1" title="是" lay-skin="tag" checked>
                        <input type="radio" name="use_ssl" value="0" title="否" lay-skin="tag">
                    </div>
                </div>

                <!-- 是否默认配置（单选，默认否，提示唯一性） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">默认配置</label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_default" value="1" title="是" lay-skin="tag" checked>
                        <input type="radio" name="is_default" value="0" title="否" lay-skin="tag">
                    </div>
                </div>

                <!-- 配置状态（单选，默认开启） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">配置状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_active" value="1" title="开启" lay-skin="tag" checked>
                        <input type="radio" name="is_active" value="0" title="关闭" lay-skin="tag">
                    </div>
                </div>

                <!-- 排序号（默认0，正整数校验） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">排序号</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort_num" id="sort_num" lay-verify="verifySort" autocomplete="off"
                            value="0" placeholder="数字越大，列表中越靠前" class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部提交按钮区域 -->
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="email-config-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>

    <!-- 引入依赖JS文件 -->
    <script src="../../../component/com/api.js"></script>
    <script src="../../../component/com/auth.js"></script>
    <script src="../../../component/layui/layui.js"></script>
    <script src="../../../component/pear/pear.js"></script>
    <script>
        layui.use(['form', 'jquery', 'layer'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let layer = layui.layer;

            // 基础配置：接口地址和Token
            let API_BASE_URL = apiConfig.baseUrl;
            let token = window.localStorage.getItem("token") || window.sessionStorage.getItem("token");

            // 1. 表单自定义校验规则
            form.verify({
                // 配置名称：非空且去空格后长度1-100
                verifyName: function (value) {
                    const trimValue = value.trim();
                    if (trimValue.length === 0) {
                        return "配置名称不能为空，请输入有效名称";
                    }
                    if (trimValue.length > 100) {
                        return "配置名称长度不能超过100个字符";
                    }
                },
                // SMTP服务器：非空且去空格
                verifyHost: function (value) {
                    if (value.trim().length === 0) {
                        return "SMTP服务器地址不能为空";
                    }
                },
                // 端口：1-65535的正整数
                verifyPort: function (value) {
                    const port = parseInt(value);
                    if (isNaN(port) || port < 1 || port > 65535) {
                        return "请输入有效的端口号（1-65535之间的整数）";
                    }
                },
                // 邮箱格式校验
                verifyEmail: function (value) {
                    const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                    if (!emailReg.test(value.trim())) {
                        return "请输入有效的邮箱格式（如：xxx@qq.com）";
                    }
                },
                // 授权码长度：至少6位（避免过短无效）
                verifyPwdLength: function (value) {
                    if (value.length < 6) {
                        return "授权码/密码长度不能少于6个字符";
                    }
                },
                // 排序号：非负整数
                verifySort: function (value) {
                    const sort = parseInt(value);
                    if (isNaN(sort) || sort < 0) {
                        return "请输入非负整数作为排序号（如：0、1、10）";
                    }
                }
            });

            // 2. 表单提交事件
            form.on('submit(email-config-save)', function (data) {
                // 处理表单数据：布尔值转换（前端单选返回字符串，需转成布尔值）
                let formData = {
                    ...data.field,
                    use_ssl: parseInt(data.field.use_ssl), // 转整数
                    is_default: parseInt(data.field.is_default), // 转整数
                    sort_num: parseInt(data.field.sort_num) // 转整数
                };

                // 发送新增请求
                $.ajax({
                    url: `${API_BASE_URL}/email/config/`, // 对应EmailConfig新增接口
                    data: JSON.stringify(formData),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    headers: {
                        "Authorization": token // 携带Token鉴权
                    },
                    success: function (result) {
                        if (result.success || result.code === 200) {
                            // 成功：提示并关闭弹窗，刷新父页面表格
                            layer.msg(result.message || "邮箱配置新增成功", {
                                icon: 1,
                                time: 1000
                            }, function () {
                                // 关闭当前弹窗（适配layer弹窗层级）
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                // 刷新父页面的邮箱配置表格
                                parent.layui.table.reload("base-table");
                            });
                        } else {
                            // 失败：提取错误信息（适配后端序列化器错误返回格式）
                            let errorMsg = result.message || "新增失败，请重试";
                            if (result.data && typeof result.data === 'object') {
                                const firstErrorKey = Object.keys(result.data)[0];
                                if (firstErrorKey) {
                                    errorMsg = result.data[firstErrorKey][0]; // 取第一个错误提示
                                }
                            }
                            layer.msg(errorMsg, { icon: 2, time: 2000 });
                        }
                    },
                    error: function () {
                        // 网络异常处理
                        layer.msg("网络请求异常，请检查接口地址或网络连接", { icon: 2, time: 2000 });
                    }
                });

                return false; // 阻止表单默认提交
            });
        });
    </script>
</body>

</html>